<template>
  <div>
    <Tabs value="name1">
      <!-- 基础设置 -->
      <TabPane label="基础设置"
               name="name1">
        <Card>
          <Row>
            订单更新频率
            <Input v-model="baseSetting.order_refresh.time"
                   placeholder="请输入"
                   style="width: 100px;margin-left:5px;margin-right:5px" />分
            <div style="float:right">
              <Button type="primary"
                      @click="handleBaseSetting"
                      style="margin-left:1200px">保存</Button>
            </div>
          </Row>
          <Row style="margin-top:30px">
            最少提现金额
            <Input v-model="baseSetting.amount_min.amount"
                   placeholder="请输入"
                   style="width: 100px;margin-left:5px;margin-right:5px" />元
          </Row>
          <Row style="margin-top:30px">
            每月
            <Input v-model="baseSetting.settling_time.date"
                   placeholder="请输入"
                   style="width: 100px;margin-left:5px;margin-right:5px" />日 进行结算
          </Row>
        </Card>
      </TabPane>
      <!-- 分销设置 -->
      <TabPane label="分销设置"
               name="name2">
        <Card>
          <Row style="margin-top:30px">
            分销层级
            <RadioGroup v-model="settings.level.level"
                        style="margin-left:30px">
              <Radio label="1"
                     style="margin-left:30px">一级</Radio>
              <Radio label="2"
                     style="margin-left:30px">二级</Radio>
              <Radio label="3"
                     style="margin-left:30px">三级</Radio>
            </RadioGroup>
            <div style="float:right">
              <Button type="primary"
                      @click="handleSetting"
                      style="margin-left:1100px">保存</Button>
            </div>
          </Row>
          <Row style="margin-top:30px">
            <span style="margin-right:65px">分销比例</span>
            一级
            <Input v-model="settings.commission_rate.one_level"
                   placeholder="请输入"
                   style="width: 100px;margin-right:10px" />
            <span style="margin-left:-8px;margin-right:8px">%</span>
            二级
            <Input v-model="settings.commission_rate.two_level"
                   placeholder="请输入"
                   style="width: 100px;margin-right:10px" />
            <span style="margin-left:-8px;margin-right:8px">%</span>
            三级
            <Input v-model="settings.commission_rate.three_level"
                   placeholder="请输入"
                   style="width: 100px" />
            <span style="margin-left:0px">%</span>
          </Row>
          <Row style="margin-top:30px">
            分销内购
            <RadioGroup v-model="settings.internal_purchase.is_open"
                        style="margin-left:30px">
              <Radio label="1"
                     style="margin-left:30px">开启</Radio>
              <Radio label="0"
                     style="margin-left:30px">关闭</Radio>
            </RadioGroup>
          </Row>
        </Card>

        <Row style="margin-top:30px">
          <Row>
            <Button type="primary"
                    @click="handleAddBestVip()">添加优质会员</Button>
            <div style="float:right">
              <Input v-model="searchForm.name"
                     placeholder="请输入昵称"
                     style="width:300px "
                     @keydown.enter.native="handleSearch1" />
              <Button @click="handleSearch1"
                      type="primary"
                      style="margin-left:20px">搜索</Button>
              <Button @click="handleReset"
                      type="default"
                      style="margin-left:10px">重置</Button>
            </div>
          </Row>
        </Row>
        <Card style="margin-top:50px">
          <!-- 会员列表 -->
          <Row>
            <Table border
                   size="small"
                   :columns="columns5"
                   :data="data5"
                   style="margin-top:20px"></Table>
          </Row>
          <Row type="flex"
               justify="end"
               class="page"
               style="margin-bottom:90px">
            <Page :current="searchForm.page"
                  :total="total"
                  :page-size="searchForm.limit"
                  @on-change="changePage"
                  @on-page-size-change="changePageSize"
                  :page-size-opts="[10, 20, 50]"
                  size="small"
                  show-total
                  show-elevator
                  show-sizer></Page>
          </Row>
          <!-- 模态窗1 -->
          <!-- ************************************ -->
          <Modal v-model="modal1"
                 title="选择优质会员"
                 width="1000">
            <!-- 搜索 -->
            <Input v-model="vipSearchList"
                   placeholder="请输入昵称"
                   style="width:300px " />
            <Button @click="handleSearch2"
                    type="primary"
                    style="margin-left:20px">搜索</Button>
            <!-- 分销比例 -->
            <Row style="margin-top:30px">
              <span style="margin-right:10px">分销比例</span>
              一级
              <Input v-model="addForm.one_level"
                     placeholder="请输入"
                     style="width: 100px;margin-right:10px" />
              <span style="margin-left:-8px;margin-right:8px">%</span>
              二级
              <Input v-model="addForm.two_level"
                     placeholder="请输入"
                     style="width: 100px;margin-right:10px" />
              <span style="margin-left:-8px;margin-right:8px">%</span>
              三级
              <Input v-model="addForm.three_level"
                     placeholder="请输入"
                     style="width: 100px" />
              <span style="margin-left:0px;">%</span>
            </Row>
            <Row>
              <Table border
                     highlight-row
                     stripe
                     :columns="columns1"
                     :data="data1"
                     style="margin-top:20px"></Table>
            </Row>
            <!-- 模态窗底部 -->
            <div slot="footer">
              <Button type="default"
                      @click="cancel">取消</Button>
              <Button type="primary"
                      @click="ok">确认</Button>
            </div>
          </Modal>
          <!-- 模态窗2 -->
          <Modal v-model="modal2"
                 title="修改优质会员"
                 width="500"
                 @on-ok="ok2"
                 @on-cancel="cancel2">
            <!-- 分销比例 -->
            <Row style="margin-top:30px">
              <span style="margin-right:10px">分销比例</span>
              一级
              <Input v-model="editForm.one_level"
                     placeholder="请输入"
                     style="width: 50px;margin-right:10px" />%二级
              <Input v-model="editForm.two_level"
                     placeholder="请输入"
                     style="width: 50px;margin-right:10px" />%三级
              <Input v-model="editForm.three_level"
                     placeholder="请输入"
                     style="width: 50px" />%
            </Row>
          </Modal>
          <!-- 模态窗3 -->
          <Modal v-model="modal3"
                 title="删除当前优质会员"
                 width="500"
                 @on-ok="ok3"
                 @on-cancel="cancel3"></Modal>
        </Card>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import {
  settingConfig,
  settingList,
  bestVipList,
  vipNextList,
  vipUserList,
  addBestVip,
  delBestVip,
  detailBestVip,
  editBestVip
} from '@/api/mc/vip.js'
export default {
  name: '',
  data () {
    return {
      currentid: 0,
      // 基础设置
      baseSetting: {
        order_refresh: {
          time: 0 // 更新频率/分钟
        },
        amount_min: {
          amount: 0 // 最小提现金额/元
        },
        settling_time: {
          data: 0 // 每月结算日期/日
        }
      },
      // 分销设置
      settings: {
        level: {
          // 分销层级
          level: ''
        },
        commission_rate: {
          // 分佣比例
          one_level: 1,
          two_level: 1,
          three_level: 1
        },
        internal_purchase: {
          // 是否开启分销内购
          is_open: ''
        }
      },
      searchForm: {
        filter: {}, // 双向绑定搜索数据
        sort: { id: 'desc' }, // 自定义排序
        name: null,
        page: 1,
        limit: 10
      },
      limit: null,
      total: 0,
      // 添加优质会员模态窗
      modal1: false,
      // 编辑优质会员模态窗
      modal2: false,
      // 删除优质会员模态窗
      modal3: false,
      // 添加优质会员
      addForm: {
        user_id: 1,
        one_level: 1,
        two_level: 1,
        three_level: 1
      },
      // 编辑优质会员
      editForm: {
        one_level: 1,
        two_level: 1,
        three_level: 1
      },
      // 会员列表
      vipSearchList: '',
      // 添加优质会员模态窗表格
      columns1: [
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '昵称',
          key: 'nickname',
          align: 'center'
        },
        {
          title: '会员头像',
          key: 'headimgurl',
          align: 'center',
          render (h, params) {
            const { headimgurl } = params.row
            return h('img', {
              style: {
                weight: '50px',
                height: '50px'
              },
              attrs: {
                src: params.row.headimgurl
              }
            })
          }
        },
        {
          title: '下级数量',
          key: 'children_num',
          align: 'center'
        },
        {
          title: ' ',
          align: 'center',
          key: 'checkBox',
          render: (h, params) => {
            return h('div', [
              h('Checkbox', {
                props: {
                  value: params.row.checkBox
                },
                on: {
                  'on-change': e => {
                    this.data1.forEach(items => {
                      // 先取消所有对象的勾选，checkBox设置为false
                      this.$set(items, 'checkBox', false)
                    })
                    this.data1[params.index].checkBox = e // 再将勾选的对象的checkBox设置为true
                    this.edit(params.row, e)
                  }
                }
              })
            ])
          }
        }
      ],
      // 添加优质会员模态窗数据
      data1: [],
      // 优质会员标头
      columns5: [
        {
          title: '会员ID',
          key: 'user_id',
          width: '80',
          align: 'center'
        },
        {
          title: '昵称',
          key: 'name',
          align: 'center',
          render (h, params) {
            const { nickname } = params.row.relevance_quality_user
            return h('span', params.row.relevance_quality_user.nickname)
          }
        },
        {
          title: '会员头像',
          key: 'headimgurl',
          align: 'center',
          render (h, params) {
            const { headimgurl } = params.row.relevance_quality_user
            return h('img', {
              style: {
                weight: '50px',
                height: '50px'
              },
              attrs: {
                src: params.row.relevance_quality_user.headimgurl
              }
            })
          }
        },
        {
          title: '微信',
          key: 'wx_no',
          align: 'center',
          render (h, params) {
            return h('span', params.row.relevance_quality_user.wx_no)
          }
        },
        {
          title: '电话',
          key: 'mobile',
          align: 'center',
          render (h, params) {
            const { mobile } = params.row.relevance_quality_user
            return h('span', params.row.relevance_quality_user.mobile)
          }
        },
        {
          title: '一级分佣',
          key: 'one_level',
          align: 'center',
          render (h, params) {
            return h('span', `${parseInt(params.row.one_level * 100)}%`)
          }
        },
        {
          title: '二级分佣',
          key: 'two_level',
          align: 'center',
          render (h, params) {
            return h('span', `${parseInt(params.row.two_level * 100)}%`)
          }
        },
        {
          title: '三级分佣',
          key: 'three_level',
          align: 'center',
          render (h, params) {
            return h('span', `${parseInt(params.row.three_level * 100)}%`)
          }
        },
        {
          title: '操作',
          key: 'option',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '60px'
                  },
                  on: {
                    click: () => {
                      this.modal2 = true
                      this.edit2(params.row)
                      this.handleEdit()
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    width: '60px'
                  },
                  on: {
                    click: () => {
                      this.modal3 = true
                      this.edit3(params.row)
                      this.handleDelBestVip()
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      // 优质会员列表数据
      data5: [],
      rowTemp: {},
      rowTemp2: {},
      rowTemp3: {
        quality_id: 1
      },
      checkState: false
    }
  },
  created () {
    this.getList()
    this.getBestVipList()
  },
  methods: {
    // 模态窗1确认-添加优质会员
    ok () {
      let reg = /^\d+$/ // 验证数字
      let reg3 =
        reg.test(this.addForm.one_level) &&
        reg.test(this.addForm.two_level) &&
        reg.test(this.addForm.three_level)
      let sum =
        parseInt(this.addForm.one_level) +
        parseInt(this.addForm.two_level) +
        parseInt(this.addForm.three_level)
      let sum3 = sum >= 0 && sum <= 100 // 比例之和
      let isCheck = this.checkState // 是否选中
      if (reg3) {
        if (sum3) {
          if (isCheck) {
            this.addForm.user_id = this.rowTemp.id
            addBestVip(this.addForm).then(res => {
              this.addForm.user_id = null
              this.$Message.success('添加优质会员成功')
              this.getBestVipList()
              this.modal1 = false
            })
          } else {
            this.$Message.info('请选择用户')
          }
        } else {
          this.$Message.info('分佣比例之和不能大于100%')
        }
      } else {
        this.$Message.info('分佣比例为0-100的整数')
      }
    },
    // 模态窗1取消
    cancel () {
      this.modal1 = false
      this.clearTemp()
    },
    // 模态窗2确认-优质会员编辑
    ok2 () {
      let sum =
        parseInt(this.editForm.one_level) +
        parseInt(this.editForm.two_level) +
        parseInt(this.editForm.three_level)
      // console.log('sum', sum)

      if (sum > 0 && sum < 100) {
        editBestVip(this.rowTemp2.id, this.editForm).then(res => {
          this.$Message.success('编辑成功')
          this.getBestVipList()
        })
      } else {
        this.$Message.info('比例总和不能超过100%')
      }
    },
    // 模态窗2取消
    cancel2 () { },
    // 模态窗3确认-删除优质会员
    ok3 () {
      delBestVip(this.rowTemp3.quality_id).then(res => {
        this.$Message.success('删除成功')
        this.getBestVipList()
      })
    },
    // 模态窗3取消
    cancel3 () {
      this.$Message.info('取消删除')
    },
    // 修改基础设置
    handleBaseSetting () {
      this.baseSetting.order_refresh.time = this.baseSetting.order_refresh.time
      this.baseSetting.amount_min.amount = this.baseSetting.amount_min.amount
      this.baseSetting.settling_time.date = this.baseSetting.settling_time.date
      settingConfig(this.baseSetting).then(res => {
        this.$Message.success('修改基础设置成功')
        this.getList()
      })
    },
    // 修改分销设置
    handleSetting () {
      // console.log('点击保存按钮')
      let sum =
        parseInt(this.settings.commission_rate.one_level) +
        parseInt(this.settings.commission_rate.two_level) +
        parseInt(this.settings.commission_rate.three_level)
      if (sum > 0 && sum < 100) {
        settingConfig(this.settings).then(res => {
          this.$Message.success('修改设置成功')
          this.getList()
        })
      } else {
        this.$Message.info('分佣比例总和不能大于100%')
      }
    },
    // 搜索
    handleSearch1 (e) {
      this.searchForm.page = 1
      this.searchForm.limit = this.limit
      this.getBestVipList()
    },
    // 重置
    handleReset () {
      this.searchForm.name = ''
      this.searchForm.page = 1
      this.searchForm.limit = this.limit
      this.getBestVipList()
    },
    // 选择当前行
    edit (p, e) {
      this.rowTemp = p
      this.checkState = e
      console.log('选择当前行为', e)
      console.log('选择当前行id为', p.id)
    },
    edit2 (e) {
      this.rowTemp2.id = e.id
      console.log('选择当前行id为', e.id)
    },
    edit3 (e) {
      this.rowTemp3.quality_id = e.id
      console.log('删除当前行id为', e.id)
    },
    // 编辑当前行数据
    handleEdit () {
      console.log('编辑的当前行为：', this.rowTemp2.id)
      // 获取优质会员列表
      bestVipList().then(res => {
        res.map(v => {
          if (v.id == this.rowTemp2.id) {
            this.editForm.one_level = parseInt(v.one_level * 100)
            this.editForm.two_level = parseInt(v.two_level * 100)
            this.editForm.three_level = parseInt(v.three_level * 100)
          }
        })
      })
    },
    // 添加优质会员
    handleAddBestVip () {
      this.modal1 = true
      this.checkState = false
      this.addForm.user_id = null
      // if (this.checkState) {
      //   this.ok()
      // }
      this.clearTemp()
    },
    // 删除优质会员
    handleDelBestVip () {
      this.modal3 = true
    },
    // 添加优质会员搜索
    handleSearch2 () {
      // 获取会员列表数据
      vipUserList(this.vipSearchList).then(res => {
        let result = []
        let steps = res.map(v => {
          if (v.nickname.includes(this.vipSearchList)) {
            result.push(v)
          }
          this.data1 = []
          this.data1 = result
        })
      })
    },
    // 清除添加优质会员列表数据
    clearTemp () {
      // console.log('执行清除')
      this.checkState = false
      this.vipSearchList = ''
      this.addForm.user_id = null
      this.addForm.one_level = 1
      this.addForm.two_level = 1
      this.addForm.three_level = 1
      this.data1 = []
    },
    // 获取设置列表
    getList () {
      settingList(this.data5).then(res => {
        console.log('设置列表', res)

        this.baseSetting.order_refresh.time = res[0].value.time // 订单更新频率
        this.baseSetting.amount_min.amount = res[2].value.amount // 最小提现金额
        this.baseSetting.settling_time.date = res[3].value.date // 每月结算时间
        this.settings.level.level = res[4].value.level // 佣金分销层级
        this.settings.internal_purchase.is_open = res[5].value.is_open // 是否内购
        // 分销设置
        // 分销比例
        this.settings.commission_rate.one_level = parseInt(
          res[1].value.one_level * 100
        )
        this.settings.commission_rate.two_level = parseInt(
          res[1].value.two_level * 100
        )
        this.settings.commission_rate.three_level = parseInt(
          res[1].value.three_level * 100
        )
      })
    },
    // 获取优质会员列表
    getBestVipList () {
      this.data5 = []
      bestVipList(this.searchForm).then(res2 => {
        this.data5 = []
        // console.log('初始化优质会员列表res', res2)
        res2.data.map(v => {
          this.data5.push(v)
        })
        this.total = res2.meta.pagination.total
      })
    },
    // 分页
    changePage (v) {
      this.searchForm.page = v
      this.getBestVipList()
    },
    changePageSize (v) {
      this.limit = v
      this.searchForm.limit = v
      this.getBestVipList()
    }
  }
}
</script>
<style scoped></style>
